<template>
  <div>
    <button
      v-for="item in 5"
      :key="item"
      :class="{ active: item === current }"
      @click="$emit('update:current', item)"
    >
      {{ item }}
    </button>
    <select
      name=""
      id=""
      :value="pageSize"
      @change="$emit('update:pageSize', $event.target.value)"
    >
      <option value="3">每页三条</option>
      <option value="5">每页五条</option>
      <option value="7">每页七条</option>
      <option value="9">每页九条</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["current", "pageSize"],
};
</script>

<style>
.active {
  background-color: cyan;
}
</style>
